<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="head text-center center">
        <div class="headcentent center row">
         <div class="wyylogo"></div>
         <ul class="headnav">
             <li><a href="">发现音乐</a></li>
             <li><a href="">我的音乐</a></li>
             <li><a href="">朋友</a></li>
             <li><a href="">商城</a></li>
             <li><a href="">音乐人</a></li>
             <li><a href="">下载客户端</a></li>
        </ul>
        <span class="hot">HOT</span>
        <div class="search-wrap">
            <div class="search text-center ">
                <button></button>
                <input type="text" placeholder="音乐/视频/电台/用户">
            </div>
            <div class="writing">
                <a href="">创作中心</a>
            </div>
            <div class="login"><a href="">登录</a></div>
    </div>
    </div>
</div>
<div class="red">
    <div class="redbox center">
        <ul class="rednav row">
            <li><a href=""><em>推荐</em></a></li>
            <li><a href=""><em>排行榜</em></a></li>
            <li><a href=""><em>歌单</em></a></li>
            <li><a href=""><em>主播电台</em></a></li>
            <li><a href=""><em>歌手</em></a></li>
            <li><a href=""><em>新碟上架</em></a></li>
        </ul>
    </div>
</div>
<div class="bkbox">
    <div class="bkcontent center">
        <a href="" class="leftsanjiao"></a>
        <a href="" class="rightsanjiao"></a>
    </div>
</div>
<div class="middle">
<div class="middlewrap center row">
<div class="hotbox left">
    <div class="hotrecommend ">
        <div class="hot-nav row">
            <i class="round-img "></i>
            <a href="">热门推荐</a>
            <a href="">华语</a><span>|</span>
            <a href="">流行</a><span>|</span>
            <a href="">摇滚</a><span>|</span>
            <a href="">民谣</a><span>|</span>
            <a href="">电子</a>
            <div class="more right">
                <a href="" class="">更多<i class="jiantou"></i></a>
            </div> 
        </div>
        <div class="hot-picture">
            <div class="card">
                <div class="bottom"><img src="images/card1.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">10万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">[欢快男嗓]温柔沉迷侵入心底！</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card1.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">10万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">[欢快男嗓]温柔沉迷侵入心底！</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card1.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">10万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">[欢快男嗓]温柔沉迷侵入心底！</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card1.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">10万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">[欢快男嗓]温柔沉迷侵入心底！</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card2.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">15万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">生活明朗｜用微笑去开启每一次好运</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card2.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">15万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">生活明朗｜用微笑去开启每一次好运</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card2.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">15万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">生活明朗｜用微笑去开启每一次好运</a>
            </div>
            <div class="card">
                <div class="bottom"><img src="images/card2.png" alt="" width="140px" height="140px">
                <div class="cardbuttom">
                    <i class="eji"></i>
                    <span class="amount">15万</span>
                    <a href=""><i class="bof"></i></a>
                </div>
                </div>
                <a href="">生活明朗｜用微笑去开启每一次好运</a>
            </div>
        </div>
        <div class="hot-nav row">
            <i class="round-img "></i>
            <a href="">新碟上架</a>
            <div class="more right">
                <a href="" class="">更多<i class="jiantou"></i></a>
            </div> 
        </div>
        <a href=""><div class="xindie"></div></a>
        <div class="hot-nav row">
            <i class="round-img "></i>
            <a href="">榜单</a>
            <div class="more right">
                <a href="" class="">更多<i class="jiantou"></i></a>
            </div> 
        </div>
        <div class="hot-list row">
            <dl>
                <dt>
                    <img src="images/bsb.png" alt="" class="left">
                    <div class="text left">
                        <h2 class="text-content"><a href="">飙升榜</a></h2>
                        <a href=""><img src="images/播放.png" alt="" width="22px" height="22px"></a>
                        <a href="" class="collection"><img src="images/收藏.png" alt="" width="18px" height="18px"></a>
                    </div>
                </dt>
                    <dd>
                        <ol>
                            <li><span class="no">1</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">2</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">3</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">4</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">5</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">6</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">7</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">8</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">9</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">10</span><a href="">没时间流眼泪</a></li>
                        </ol>
                    </dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/bsb2.png" alt="" class="left">
                    <div class="text left">
                        <h2 class="text-content"><a href="">新歌榜</a></h2>
                        <a href=""><img src="images/播放.png" alt="" width="22px" height="22px"></a>
                        <a href="" class="collection"><img src="images/收藏.png" alt="" width="18px" height="18px"></a>
                    </div>
                </dt>
                    <dd>
                        <ol>
                            <li><span class="no">1</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">2</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">3</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">4</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">5</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">6</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">7</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">8</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">9</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">10</span><a href="">没时间流眼泪</a></li>
                        </ol>
                    </dd>
            </dl>
            <dl>
                <dt>
                    <img src="images/bsb3.png" alt="" class="left">
                    <div class="text left">
                        <h2 class="text-content"><a href="">原创榜</a></h2>
                        <a href=""><img src="images/播放.png" alt="" width="22px" height="22px"></a>
                        <a href="" class="collection"><img src="images/收藏.png" alt="" width="18px" height="18px"></a>
                    </div>
                </dt>
                    <dd>
                        <ol>
                            <li><span class="no">1</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">2</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">3</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">4</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">5</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">6</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">7</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">8</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">9</span><a href="">没时间流眼泪</a></li>
                            <li><span class="no">10</span><a href="">没时间流眼泪</a></li>
                        </ol>
                    </dd>
            </dl>
            
        </div>
    </div>
</div>

<div class="singerbox left">
    <div class="singer-login">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <a href="" >用户登录</a>
    </div>
    <div class="singernav">
        <h3>
        <span>入驻歌手</span>
        <a href="" class="allsee">查看全部></a>
        </h3>
    </div>
    <div class="singerlist">
        <a href="">
            <div class="singercard">
            <img src="images/singer1.jpg" alt="" class="left">
            <div class="text left">
            <h4>张惠妹aMEI</h4>
            <h5>台湾歌手张惠妹</h3>
            </div>
        </div>
        </a><a href="">
            <div class="singercard">
            <img src="images/singer1.jpg" alt="" class="left">
            <div class="text left">
            <h4>张惠妹aMEI</h4>
            <h5>台湾歌手张惠妹</h3>
            </div>
            </div>
        </a><a href="">
            <div class="singercard">
                <img src="images/singer1.jpg" alt="" class="left">
                <div class="text left">
                <h4>张惠妹aMEI</h4>
                <h5>台湾歌手张惠妹</h3>
                </div></div>
        </a><a href="">
            <div class="singercard">
            <img src="images/singer2.jpg" alt="" class="left">
            <div class="text left">
            <h4>Fine乐团</h4>
            <h5>独立音乐人</h3>
            </div>
            </div>
        </a><a href="">
            <div class="singercard">
                <img src="images/singer2.jpg" alt="" class="left">
                <div class="text left">
                <h4>Fine乐团</h4>
                <h5>独立音乐人</h3>
                </div>
            </div>
        </a>
        <div class="singerto text-center">
            <a href="">申请成为网易音乐达人</a>
        </div>
    </div>
    <div class="singernav">
        <span>热门主播</span>
    </div>
    <div class="zhubolist ">
        <a href="">
            <div class="zhubocard">
            <img src="images/zhubo1.jpg" alt="" class="left">
            <div class="text left">
            <h4>陈立</h4>
            <h5>心理学家、美食家陈立教授</h3>
            </div>
        </div>
        </a><a href="">
            <div class="zhubocard">
            <img src="images/zhubo1.jpg" alt="" class="left">
            <div class="text left">
            <h4>陈立</h4>
            <h5>心理学家、美食家陈立教授</h3>
            </div>
            </div>
        </a><a href="">
            <div class="zhubocard">
                <img src="images/zhubo1.jpg" alt="" class="left">
                <div class="text left">
                <h4>陈立</h4>
                <h5>心理学家、美食家陈立教授</h3>
                </div></div>
        </a><a href="">
            <div class="zhubocard">
            <img src="images/zhubo2.jpg" alt="" class="left">
            <div class="text left">
            <h4>刘维-Julius</h4>
            <h5>歌手、播客节目《维维道来</h3>
            </div>
            </div>
        </a><a href="">
            <div class="zhubocard">
                <img src="images/zhubo2.jpg" alt="" class="left">
                <div class="text left">
                <h4>刘维-Julius</h4>
                <h5>歌手、播客节目《维维道来</h3>
                </div>
            </div>
        </a>
</div>
</div>
</div>
<div class="ft">
    <div class="ft-content row center">
    <div class="ft-l left">
        <div class="text">
            <p class="text-p">
                <a href="">服务条款</a><span>|</span>
                <a href="">隐私政策</a><span>|</span>
                <a href="">儿童隐私</a><span>|</span>
                <a href="">版权投诉指引</a><span>|</span>
                <a href="">意见反馈</a>
            </p>
            <p>
                <span>网易公司版权所有01997-2021</span>
                <span>杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</span>
            </p>
            <p>
                <span>违法和不良信息举报电话: 0571-89853516</span>
                <span>举报邮箱: ncm5990@163.com </span>
            </p>
            <p>
                <span>粤B2-20090191-18工业和信息化部备案管理系统网站</span>
                <span>浙公网安备33010902002564号</span>
            </p>
        </div>
    </div>
    <div class="ft-r left row">
        <div class="ftr-content right">
            <a href=""><img src="images/ft1.png" alt=""></a>
            <a href=""><img src="images/ft2.png" alt=""></a>
            <a href=""><img src="images/ft3.png" alt=""></a>
            <a href=""><img src="images/ft4.png" alt=""></a>
            <a href=""><img src="images/ft5.png" alt=""></a>
        </div>
    </div>
    </div>
</div>
</body>
</html>